<template>
    <div>
        <el-dialog
            :title="$t('user.userManageMentAddTitle')"
            :visible="visibleAdd"
            class="el-dialog-lg"
            @close="()=>{$store.commit('setVisibleAdd',false)}">
            <el-form ref="form" :model="form" label-width="200px" >
                <el-row :gutter="24">
                    <el-col :span="11">
                        <el-form-item :label="$t('login.loginName')" prop="loginName" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_loginName,trigger:'blur'}]">
                            <el-input v-model="form.loginName" auto-complete="new-accounts"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('login.wifiSN')" prop="wifiSN" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_wifiSN,trigger:'blur'}]">
                            <el-input v-big v-model="form.wifiSN" auto-complete="new-accounts"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('password')" prop="password" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_password,trigger:'blur'}]">
                            <el-input v-model="form.password" show-password auto-complete="new-password"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('user.updatePassword.conPwd')" prop="repassword" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_repassword,trigger:'blur'}]">
                            <el-input v-model="form.repassword" show-password auto-complete="new-password"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('address')">
                            <el-input v-model="form.address" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item :label="$t('country')" prop="country" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.country" filterable :placeholder="$t('pleaseSelect')" @change='changeData(2)'>
                                <el-option
                                v-for="item in selectCountryData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('province')" v-show="isChina">
                            <el-select v-model="form.province" filterable :placeholder="$t('pleaseSelect')" @change='changeData(3)'>
                                <el-option
                                v-for="item in selectProvinceData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('city')" v-show="isChina">
                            <el-select v-model="form.city" filterable :placeholder="$t('pleaseSelect')">
                                <el-option
                                v-for="item in selectCityData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item :label="$t('email')" prop="email" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                            <el-input v-model="form.email" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('telphone')" prop="phone" :rules="[{validator:test_telphone,trigger:'blur'}]">
                            <el-input v-model="form.phone" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleAdd',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import md5 from 'js-md5'
export default {
    props: {
        selectCountryData:{
            type:Array,
            default:() => {return []}
        },
    },
    data() {
        return {
            selectProvinceData:[],
            selectCityData:[],
            isChina:false,
            form:{
                loginName:'',
                wifiSN:'',
                password:'',
                repassword:'',
                address:'',
                country:'',
                province:'',
                city:'',
                email:'',
                phone:'',
                optType:'2',
                systemFlag:'0',
                domain:window.location.host
            },
            test_loginName:{},
            test_wifiSN:{},
            test_password:{},
            test_repassword:{},
            test_telphone:{},
            test_email:{}
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        }
    },
    mounted(){
        this.test_loginName = async(rule, value, callback) => {
            if(!this.Regs.loginName_reg.test(value)){
                callback(new Error(this.$t('login.js_sign_userName_error')));
            }else{
                let res = await this.API.agentUserisUnique({
                    loginName:this.form.loginName
                })
                if(!res.success){
                    callback(new Error(this.$t('login.js_sign_userName_exist')));
                }else{
                    callback()
                }
            }
        }
        this.test_wifiSN = async(rule, value, callback) => {
            let res = await this.API.checkUserManageSN({
                loginName:this.form.loginName,
                wifisvn:this.form.wifiSN
            })
            if(res=='2'){
                callback(new Error(this.$t('login.js_sign_wifisn_error')));
            }else if(res=='3'){
                callback(new Error(this.$t('login.js_sign_wifisn_registered')));
            }else{
                callback()
            }
        }
        this.test_password = (rule, value, callback) => {
            if(this.Regs.space_reg.test(value)){
                callback(new Error(this.$t('pwd_contain_space')));
            }else{
                callback()
            }
        }
        this.test_repassword = (rule, value, callback) => {
            if(value!=this.form.password){
                callback(new Error(this.$t('login.js_sign_repwd_error')));
            }else{
                callback()
            }
        }
        this.test_telphone = (rule, value, callback) => {
            if(value!=''&&!this.Regs.phone_reg.test(value)){
                callback(new Error(this.$t('login.js_sign_phone_error')));
            }else{
                callback()
            }
        }
        this.test_email = (rule, value, callback) => {
            if(value!=''&&!this.Regs.email_reg.test(value)){
                callback(new Error(this.$t('login.js_sign_email_error')));
            }else{
                callback()
            }
        }
    },
    methods: {
        async changeData(level){
            if(level=='2'){
                this.form.province = ''
                this.form.city = ''
            }else if(level=='3'){
                this.form.city = ''
            }
            if(this.form.country=='中国'){
                this.isChina=true
                if(level=='2'){
                    let res = await this.API.selectNextAreaByName({
                        name:encodeURI('中国'),
                        areaLevel:level
                    })
                    this.selectProvinceData = res || []
                }else if(level=='3'){
                    let res = await this.API.selectNextAreaByName({
                        name:encodeURI(this.form.province),
                        areaLevel:level
                    })
                    this.selectCityData = res || []
                }
            }else{
                this.isChina=false
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            let res = await this.API.userManageAdd(
                Object.assign(this.form,{password:md5(this.form.password)})
            )
            if(res){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.$store.commit('setVisibleAdd',false)
            this.$emit('uploadPage',true)
        }
    }
};
</script>

<style  lang="less">
</style>
